<route lang="jsonc" type="page">
{
    "layout": "default",
    "style": {
        "navigationStyle": "custom",
        "navigationBarTitleText": ""
    }
}
</route>

<script lang="ts" setup>
// 切换密码手机号
import { ref } from 'vue'
import { useToast } from 'wot-design-uni'
import { getLoginY } from '@/api/login/login'
import { useUserStore } from '@/store/user'

const useLogin = useUserStore()
const currentB = ref(true)
const checked = ref<boolean>(false)

// 点击返回上一页
function handleClickLeft() {
  uni.navigateBack()
}

const { success: showSuccess } = useToast()

const model = reactive<{
  value1: string
  value2: string
  passY: string
}>({
  value1: '',
  value2: '',
  passY: '',
})

const form = ref()

function handleSubmit() {
  form.value
    .validate()
    .then(({ valid, errors }) => {
      if (valid) {
        if (checked.value) {
          if (currentB.value) {
            useLogin.loginPassword({ mobile: model.value1, password: model.value2 }).then((res) => {
              if (res.code === 10000) {
                uni.switchTab({ url: '/pages/index/index' })
                uni.setStorageSync('token', res.data.token)
                uni.setStorageSync('key', res.data)
              }
            }).catch()
          }
          else {
            useLogin.loginCode({ mobile: model.value1, code: model.passY }).then((res) => {
              if (res.code === 10000) {
                uni.switchTab({ url: '/pages/index/index' })
              }
            }).catch()
          }
        }
        else {
          showSuccess({
            msg: '请勾选协议',
          })
        }
      }
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}

// 倒计时验证码
const countdownInfo = ref({
  second: 60,
  buttonName: '获取验证码',
  isDisabled: false,
})
function countdown() {
  getLoginY({ mobile: model.value1, type: 'login' }).then((res) => {
    if (res.code === 10000) {
      console.log(res.data.code)
      countdownInfo.value.isDisabled = true
      const interval = window.setInterval(() => {
        countdownInfo.value.buttonName = `${countdownInfo.value.second}秒后重新获取`
        countdownInfo.value.second--
        if (countdownInfo.value.second <= 0) {
          countdownInfo.value.buttonName = '获取验证码'
          countdownInfo.value.second = 60
          countdownInfo.value.isDisabled = false
          window.clearInterval(interval)
        }
      }, 1000)
    }
  }).catch()
}
// watch(countdownInfo, (newValue) => {
//   localStorage.setItem('countdownInfo', JSON.stringify(newValue))
// }, { deep: true })
// // 初始化时从localStorage获取数据
// const localCountdownInfo = localStorage.getItem('countdownInfo')
// if (localCountdownInfo) {
//   countdownInfo.value = JSON.parse(localCountdownInfo)
//   if (countdownInfo.value.second !== 60) {
//     countdown()
//   }
// }
</script>

<template>
  <view>
    <view>
      <wd-navbar right-text="注册" left-arrow class="h-88rpx" :bordered="false" @click-left="handleClickLeft">
        <template #right>
          <view class="text-34rpx text-#16C2A3 font-medium">
            注册
          </view>
        </template>
      </wd-navbar>
    </view>
    <view
      class="mb-90rpx ml-30rpx mr-30rpx mt-50rpx flex flex-justify-between flex-items-center text-48rpx text-#121826 font-medium"
    >
      {{ currentB ? '密码登录' : '手机验证码登录' }}
      <text class="font-regular text-30rpx text-#3C3E42" @click="currentB = !currentB">
        {{ currentB ? '手机验证码登录' : '密码登录' }}
        <wd-icon name="arrow-right" size="32rpx" />
      </text>
    </view>
    <view class="ml-30rpx mr-30rpx">
      <wd-form ref="form" :model="model">
        <wd-cell-group border>
          <wd-input
            v-model="model.value1" prop="value1" clearable size="large" placeholder="请输入手机号码"
            :rules="[{ required: true, message: '请填写手机号码' }]"
          />
          <wd-input
            v-if="currentB" v-model="model.value2" prop="value2" show-password size="large"
            class="mb-30rpx" clearable placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <wd-input
            v-else v-model="model.passY" prop="passY" size="large" class="mb-30rpx" clearable
            placeholder="请输入短信验证码" :rules="[{ required: true, message: '请填写短信验证码' }]"
          >
            <template #suffix>
              <wd-button type="success" :disabled="countdownInfo.isDisabled" @click="countdown()">
                {{ countdownInfo.buttonName }}
              </wd-button>
            </template>
          </wd-input>
        </wd-cell-group>

        <wd-checkbox v-model="checked" checked-color="#34d19d" change="checked = !checked">
          我已同意
          <text class="text-#03de6d">用户协议</text>
          及
          <text class="text-#03de6d">隐私协议</text>
        </wd-checkbox>

        <view class="footer mt-42rpx">
          <wd-button type="success" size="large" :disabled="!checked" block @click="handleSubmit">
            提交
          </wd-button>
        </view>
      </wd-form>
    </view>

    <view class="absolute bottom-[15%] left-[50%] ml-[-200rpx] w-400rpx">
      <wd-divider class="text-24rpx">
        第三方登录
      </wd-divider>
      <image class="ml-170rpx h-60rpx w-60rpx" src="@/static/images/icon_QQ.png" />
    </view>
  </view>
</template>

<style lang="scss" scoped>
//
</style>
